<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!-- 表单提交方法GET和POST -->
     <form action="#" name="" method="POST">
        <!-- 表单框区 -->
        <fieldset>
            <!-- 框区标题 -->
            <legend>基本信息</legend>
            <!-- for关联input的id -->
            <label for="name">姓名：</label>
            <!-- 单行文本框 -->
            <input type="text" name="name" id="name" value="">
            <label for="nickname">昵称：</label>
            <input type="text" name="nickname" id="nickname">
            <label for="password">密码：</label>
            <input type="password" name="password" id="password">
            <!-- 单选(多个name要一样) -->
            <label for="nan">男</label>
            <!-- checked默认选择 -->
            <input type="radio" name="sex" id="nan" checked>
            <label for="nv">女</label>
            <input type="radio" name="sex" id="nv">
        </fieldset>
        <!-- 表单框区 -->
        <fieldset>
            <!-- 框区标题 -->
            <legend>学校</legend>
            <!-- 下拉框 -->
            <select name="coloege" id="coloege">
                <!-- 将选项分组 -->
                <optgroup label="国家级重点大学">
                    <option value="北大">北京大学</option>
                    <option value="清华">清华大学</option>
                </optgroup>
                <optgroup label="地方性重点大学">
                    <!-- selected默认选择 -->
                    <option value="九院" selected>九江学院</option>
                </optgroup>
            </select>
        </fieldset>
        <!-- 表单框区 -->
        <fieldset>
            <!-- 框区标题 -->
            <legend>兴趣爱好</legend>
            <!-- 多选框 -->
             <label>
                兴趣爱好：
                <input type="checkbox" name="favorite[]" id="游泳">游泳
                <input type="checkbox" name="favorite[]" id="跑步">跑步
                <input type="checkbox" name="favorite[]" id="攀岩">攀岩
             </label>
        </fieldset>
        <fieldset>
            <legend>附件</legend>
            <!-- 文件上传 -->
            <input type="file" name="update-file" id="update-file">
            <!-- 隐藏域 -->
             <input type="hidden" name="user" value="admit" id="POST">
             <!-- 多行文本输入框 -->
              <!-- 通过JS变成富文本编辑器 -->
             <textarea name="note" id="note" cols="30" rows="10"></textarea>
        </fieldset>
        <!-- 提交按钮 -->
         <input type="submit" name="submit" id="submit">
         <!-- 重置按钮 -->
          <input type="reset" name="reset" id="reset">
          <!-- 无默认行为按钮，与JS脚本配合 -->
          <input type="button" name="button" id="button">
          <!-- 图片按钮 -->
          <input type="image" src="" alt="">
          <!-- 可多样化自定义 -->
          <button type="submit">提交</button>
          <button type="reset">重置</button>
     </form>
</body>
</html>
